<script setup lang="ts">
import { ElAside, ElContainer, ElIcon, ElMenu, ElMenuItem, ElTableColumn } from 'element-plus';
import { ref, reactive } from 'vue';
import { HomeFilled, User, List } from '@element-plus/icons-vue';
const tasks = ref([
  {
    id: 1,
    title: '完成项目文档',
    status: 'in-progress',
    priority: 'high',
    dueDate: '2024-03-20'
  },
  {
    id: 2,
    title: '代码审查',
    status: 'completed',
    priority: 'medium',
    dueDate: '2024-03-18'
  }
]);

</script>

<template>
<div>
<ElCard >
<template #header >
 <el-table :data="tasks">
<ElTableColumn prop="title" label="截止日期"></ElTableColumn>
<ElTableColumn prop="status" label="状态">
    
    <template #default="{row}">
<ElTag :type="row.status=== 'completed' ? 'success' : 'warning'" >{{  row.status === 'completed' ? '已完成' : '进行中' }}</ElTag>
    </template>
</ElTableColumn>
</el-table>
</template>
</ElCard>
</div>

</template>
